<template>
    <div>
        <el-button
            type="primary"
            class="operate-btn"
            size="mini"
            :loading="btnLoading"
            @click="isRefresh"
            >手动刷新</el-button
        >
        <div
            v-loading="tab1Loading"
            element-loading-background="rgba(0, 0, 0, 0.08)"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
        >
            <el-form
                ref="boxForm"
                :model="boxForm"
                class="boxForm"
                label-width="165px"
            >
                <el-card>
                    <el-form-item label="摄像头设备型号:">
                        <span>{{ boxForm["06010060"] }}</span>
                    </el-form-item>
                    <el-form-item label="摄像头编码:">
                        <span>{{ boxForm["06010061"] }}</span>
                    </el-form-item>
                    <el-form-item label="摄像头状态:">
                        <el-tag size="mini" :type="boxForm['06010062']=='1'?'success':'danger'" v-if="boxForm['06010062']=='0' || boxForm['06010062']=='1'">{{ boxForm["06010062"] | filterStatus }}</el-tag>
                        <span v-else>{{ boxForm['06010062'] }}</span>
                    </el-form-item>
                </el-card>
            </el-form>
        </div>
    </div>
</template>

<script>
import { equipment } from "@/api/factuer";
import { isOnlineStatus } from "@/utils/config";
export default {
    props: {
        cameraVisible: {
            type: Boolean,
            default: false,
        },
        equipId: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            boxForm: {
                "06010060": undefined,
                "06010061": undefined,
                "06010062": undefined,
            },
            tab1Loading: false,
            btnLoading: false,
        };
    },
    watch: {
        cameraVisible: {
            handler(val) {
                if (val) {
                    this.tab1Loading = true;
                    this.doRefresh();
                }
            },
            immediate: true,
            deep: true,
        },
    },
    filters: {
        filterStatus(val) {
            if (val || val == 0) {
                let item = isOnlineStatus.find((p) => val == p.id);
                return item ? item.name : val;
            }
            return '';
        },
    },
    methods: {
        doRefresh() {
            for (const key in this.boxForm) {
                this.boxForm[key] = undefined;
            }
            this.doRead();
        },
        isRefresh() {
            this.btnLoading = true;
            this.doRefresh();
        },
        doRead() {
            let params = {
                entitys: [],
                equipId: this.equipId,
            };
            for (const key in this.boxForm) {
                params.entitys.push({ id: key });
            }
            equipment("/operate/param/read", "post", params, 1)
                .then((res) => {
                    let datas = res.data;
                    for (const key in this.boxForm) {
                        datas.forEach((item) => {
                            if (key == item.id) {
                                this.boxForm[key] = item.value;
                            }
                        });
                    }
                })
                .finally(() => {
                    this.tab1Loading = false;
                    this.btnLoading = false;
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.operate-btn {
    position: absolute;
    top: 16px;
    right: 50px;
}
.boxForm {
    .el-form-item {
        width: 100%;
        height: 28px;
        margin-bottom: 0;
        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
            line-height: 28px;
        }
    }
}
</style>
